<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
                <style type="text/css">
                    .d1 {
                        width: 200px;
                        height: 200px;
                        border: 1px solid #999999;
                        margin: 50px;
                    }
                
                    #bgyellow:checked~.d1 {
                        background-color: yellow;
                    }
                
                    #bgblue:checked~.d1 {
                        background-color: greenyellow;
                    }
                
                    #bgred:checked~.d1 {
                        background-color: red;
                    }
                    .btn{
                        display: inline-block;
                        margin: 50px;
                        width: 100px;
                        height: 50px;
                        border: 1px solid #999;
                        text-align: center;
                        line-height: 50px;
                        box-shadow: 0 0 0px #444;
                        transition: all 0.5s;
                    }
                    .btn:hover{
                        box-shadow: 0px 0px 10px #444;
                    }
                </style>
    </head>
                
                <body>
                    <label class="btn" for="bgyellow">黄色</label>
                    <label class="btn" for="bgblue">绿色</label>
                    <label class="btn" for="bgred">红色</label>
                    <input type="radio" name="color" id="bgyellow" value="黄色" hidden="hidden">
                    <input type="radio" name="color" id="bgblue" value="绿色" hidden="hidden">
                    <input type="radio" name="color" id="bgred" value="红色" hidden="hidden">
                    <div class="d1"></div>
               </body>
</html>